<template>
	<view>
		<view class="top_shops u-flex">
			<image src="https://shengtan.hwhsh.com/public/uploads/shop/_231817aa65f2003d2ca0e52c6e80e17a.png"></image>
			<view class="shopname">
				<view class="n1">老嫂子蛋糕店（杭州富阳店）</view>
				<view class="n2 u-flex">
					<view><u-rate size="28" :count="count" v-model="value"></u-rate></view>
					<span>（173条）</span>
				</view>
			</view>
		</view>
		
		<view class="pingjia_wrap">
			<view class="tabs_box">
				<u-tabs active-color="#FF4E0D" inactive-color="#999999" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			
			<view class="biaoqianKA">
				<!-- isSingleSel:是否设置单选(默认false多选) colors:设置颜色  remarkList：标签数组 @tagClick：标签点击 -->
				<cc-multipleBtn :isSingleSel="false" :colors="colors" :remarkList="remarkList" @tagClick="tagsClick"></cc-multipleBtn>
			</view>
			
			<uni-evaluate :list-data="evaluateList" :rate="200" @lookPingJia="lookPingJia"/>
		</view>
		
		
	</view>
</template>

<script>
	//数据评价模拟
	import evaluateData from '@/components/xiujun-evaluate/list.js';
	import uniEvaluate from '@/components/xiujun-evaluate/uni-evaluate.vue';
	export default {
		components: {
			uniEvaluate
		},
		data() {
			return {
				count: 5,
				value: 2,
				evaluateList: evaluateData,
				list: [{
					name: '全部评价(173)'
				}, {
					name: '当前捡漏评价(43)'
				}],
				current: 0,
				
				
				
				colors: '#FF4E0D',
				remarkList: [{
					name: '食物口味赞'
				}, {
					name: '位置好找'
				}, {
					name: '商家服务好'
				}, {
					name: '停车方便'
				}, {
					name: '服务不错'
				}, {
					name: '等餐时间长'
				}, {
					name: '价格优惠低'
				}, {
					name: '其他原因'
				}],
				
				
			}
		},
		methods: {
			tagsClick(tagArr, arr) {
				// 选中数据有变化 重新赋值（可以兼容小程序）
				this.remarkList = arr;
			
				console.log("选中的标签  = ", JSON.stringify(tagArr));
			
			},
			change(index) {
				this.current = index;
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			lookPingJia(){
				
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #f4f4f4;
}
.top_shops {
	align-items: center;
	padding: 24rpx;
	background-image: linear-gradient(to bottom, #FFF3EE, #ffffff);
	border-radius: 0 0 24rpx 24rpx;
	image {
		width: 88rpx;
		height: 88rpx;
		border-radius: 10rpx;
	}
	.shopname{
		padding-left: 20rpx;
		.n1 {
			font-weight: bold;
			font-size: 30rpx;
			margin-bottom: 10rpx;
		}
		.n2 {
			font-size: 28rpx;
			color: #999999;
		}
	}
}
.biaoqianKA {
	padding: 20rpx;
}
.pingjia_wrap {
	background-color: #ffffff;
	margin: 30rpx 0;
	border-radius: 24rpx;
	padding: 14rpx 14rpx;
	.tabs_box {
		width: 500rpx;
	}
}
</style>
